<template>
    <div>   
    <el-dialog
        title="增加借阅记录"
        v-model="dialogFormVisible"
        :before-close="clear"
        width=30%
        >  
        <el-form>
        <el-form-item label="图书名" :label-width="formLabelWidth" prop="bookName">
      <el-select v-model="form.bookName" autocomplete="off" placeholder="请选择图书">
        <el-option
          v-for="book in books"
          :key="book.bookName"
          :label="book.bookName"
          :value="book.bookName">
        </el-option>
      </el-select>
    </el-form-item>
  
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
      <el-select v-model="form.username" autocomplete="off" placeholder="请选择用户名" @change="handleUsernameChange">
        <el-option
          v-for="user in users"
          :key="user.username"
          :label="user.username"
          :value="user.username">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
      <el-input v-model="form.phone" autocomplete="off" placeholder="电话号码" :disabled="true"></el-input>
    </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer" align="right">
          <el-button @click="dialogFormVisible = false">取 消</el-button>       
          <el-button type="primary" @click="onSubmit()">确 定</el-button>
        </div>         
      </el-dialog>     
    </div>
  </template>
  <script>
  export default {
      name: 'AddBorrow',
      components:{},
      data () {
        return {
          dialogFormVisible: false,        
          form: {                             
             bookName: '',         
             username: '',         
             phone: '',                
          },
          formLabelWidth: '80px',
          rules: {            
            bookName: [
              { required: true, message: '请输入图书名', trigger: 'blur' },
            ],
          },
          users: [],
          books: [],
        }
      },
      methods: {
        clear () {       
          this.form = {            
            bookName:'',
            username:'', 
            phone:'',                             
          }
        },     
        handleUsernameChange() {
            const selectedUser = this.users.find(user => user.username === this.form.username);
            if (selectedUser) {
                this.form.phone = selectedUser.phone;
            } else {
                this.form.phone = ''; // 清空电话号码
            }
            },
        getalluser(){ 
            this.$api.post('user/getusers', null).then((res) => {                        
            if (res.code === 200) {     
                this.users = res.data
            } else {
                alert('获取用户数据失败!')
            }
            })              
        },
        getNotBorrowedBooks(){
            this.$api.post('book/getNotBorrowedBooks', null).then((res) => {                        
            if (res.code === 200) {     
                    this.books = res.data
                } else {
                alert('获取图书数据失败!')
                }
                })
        },
        onSubmit () {        
            if((this.form.bookName.trim() !== '' 
                && this.form.bookName !== undefined) 
                && (this.form.username !== '' 
                && this.form.username !== undefined
                && this.form.phone.trim() !== '' 
                && this.form.phone !== undefined))
            {   
              //alert("用户账号:"+ this.form.username ) 
              this.$confirm('此操作将增加借阅记录 , 是否继续?', '提示', 
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    this.$message({
                        type: 'success',
                        message: '确认增加借阅记录!'
                    });
                    var _this = this                 
                    let data = {
                      bookName: this.form.bookName,
                      username: this.form.username,
                      phone: this.form.phone
                    }                    
                    this.$api.post('borrow/addBorrow', data)
                        .then((res) => {                        
                            if (res.code === 200) {
                                this.$emit("onReload")
                                this.dialogFormVisible = false
                            } else {
                                this.$message({
                                    type: 'info',
                                    message: '增加借阅记录失败'
                                });   
                            }        
                        })
                })                               
            }
        }
    },    
    mounted(){
        Promise.all([this.getalluser(), this.getNotBorrowedBooks()])
        .catch(error => {
        // 处理请求失败的情况
        console.error('获取数据失败：', error);
        // 可以在这里显示错误信息给用户
        });
    },
}


</script>
  
  <style scoped>
    .el-icon-circle-plus-outline {
      margin: 50px 0 0 20px;
      font-size: 100px;
      float: left;
      cursor: pointer;
    } 
  </style>